<template>
  <div>
    <el-form :model="form" ref="form" name="basic" label-width="150px" autocomplete="off"
      style="margin-top: 10px;margin-left: 10px;">
      <el-row>
        <el-col :span="8">
          <CompanySelect :compName.sync="form.compName" title="隐患所属企业"/>
        </el-col>
        <el-col :span="8">
          <CompanySelect :compName.sync="form.createCompany" title="填报单位"/>
        </el-col>



        <el-col :span="8">
          <el-form-item label="填报人:" name="createUserName">
            <el-input v-model="form.createUserName"  placeholder="请输入填报人"  />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="检查类型:" name="checkType">
            <el-select v-model="form.checkType" show-search placeholder="请选择" style="width: 100%">
              <el-option v-for="item in checkTypeList" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
            <el-form-item label="填报日期(起始日期):" name="fromDate">
              <el-date-picker v-model="form.fromDate" type="date" style="width: 100%;" placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="填报日期(截止日期):" name="toDate">
              <el-date-picker v-model="form.toDate" type="date" style="width: 100%;" placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>

        </el-row>


    </el-form>


    <div style="margin-right: 15px;">
      <el-button type="primary" style="float: right;margin-right: 10px;margin-bottom: 10px;" size="mini" @click="clickDlTemp">导出</el-button>
      <el-button type="primary" style="float: right;margin-right: 10px;" size="mini" @click="clickAdd">新增</el-button>

      <el-button type="success" style="float: right;margin-bottom: 5px;margin-right: 10px;" size="mini"
            @click="clickQuery">查询</el-button>

    </div>
    <div style="padding: 10px 20px;">
      <el-table :data="tableData" :key="key" style="width: 100%;border: solid 1px #c0c0c0;" row-key="index"
        header-row-class-name="table_header" :row-class-name="tableRowClassName" :cell-style="{ borderColor: '#C0C0C0' }"
        border @cell-dblclick="doubleClick" id="out-table">

        <el-table-column label="图片" align="center" width="120px">
          <template slot-scope="scope">
            <img :src="scope.row.fileUrls[0]" style="width: 100px;height: 100px;" />
          </template>
        </el-table-column>

        <el-table-column prop="compName" label="隐患所属企业" align="left" min-width="200px">
        </el-table-column>
        <el-table-column prop="createUserName" label="填报单位" align="left" min-width="200px">
        </el-table-column>
        <el-table-column prop="checkType" label="检查类型" align="center">
        </el-table-column>
        <el-table-column prop="remark" label="备注" align="center">
        </el-table-column>



        <el-table-column prop="createUser" label="填报人" align="left" min-width="200px">
        </el-table-column>
        <el-table-column prop="checkDate" label="填报日期" align="center" min-width="200px">
        </el-table-column>

        <el-table-column label="操作" align="center" width="75px">
          <template slot-scope="scope">
            <el-button type="success" size="mini" @click="clickView(scope.row)">查看</el-button>
          </template>
        </el-table-column>

      </el-table>

    </div>
    <el-pagination background layout="prev, pager, next" :total="total_size" :page-size="100" :current-page="page_no">
    </el-pagination>


    <el-dialog title="删除提示" :visible.sync="delVisible" width="30%">
      <span>确定删除吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="delVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleDelete">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import UpdateModal from './updateModal';
import {
  querySafeRiskList,
  delSafeRisk,
} from '@/service/safeRisk';
// import FileSaver from 'file-saver';
import * as XLSX from 'xlsx';
import table2Excel from 'js-table2excel'

import columns from './table';
// import { tableMixin } from '@/mixin/table';
import CompanySelect from '@/components/CompanySelect';

export default {
  components: { UpdateModal, CompanySelect },
  // mixins: [tableMixin],

  data() {
    return {
      data: [],
      key: Math.random(),
      pagination: {
        showLessItems: true,
        showQuickJumper: true,
        showSizeChanger: true,
      },
      query: {},
      columns: columns,
      currItem: {},
      page_no: 0,
      page_size: 100,
      form: {},
      tableLoading: false,
      tableData: [],
      total_size: 0,
      loading: false,
      querySafeRiskList,
      delVisible: false,
      checkTypeList: [
        {
          label: "领导检查",
          value: "领导检查",
        },
        {
          label: "日常检查",
          value: "日常检查",
        },
        {
          label: "季节性检查",
          value: "季节性检查",
        },
        {
          label: "节前检查",
          value: "节前检查",
        },
        {
          label: "安全联盟检查",
          value: "安全联盟检查",
        },
        {
          label: "专业性检查",
          value: "专业性检查",
        },
        {
          label: "其他",
          value: "其他",
        },
      ],

    };
  },

  methods: {
    clickShowEdit(index, record) {
      this.$refs.UpdateModalRef.openEditDialog({ ...record });
    },
    clickAdd(record) {
      this.$router.push({ name: 'companyRisk' })
    },
    clickDel(index, row) {
      this.delVisible = true;
      this.currItem = { ...row };
    },

    tableRowClassName({ row, rowIndex }) {
      if (row['isHouseOwner'] === 'Y') {
        console.log('warn');
        return 'warning-row';
      }
      return '';
    },

    getFD(fileObj) {
      const formData = new FormData();
      formData.append('file', fileObj.file);
      return formData;
    },
    formatExportData(list) {
      list.forEach((item) => {
        for (let key in item) {
          if (!item[key]) {
            item[key] = ""
          }
        }
      });
      return list
    },

    clickDlTemp(index, row) {
      console.log('table2Excel', table2Excel);
      // console.log('XLSX', XLSX, document.querySelector('#out-table'));
      // var wb = XLSX.utils.table_to_book(document.querySelector('#out-table'));
      // var wbout = XLSX.write(wb, {
      //   bookType: 'xlsx',
      //   bookSST: true,
      //   type: 'array',
      // });
      try {
        const date = new Date();
        let dateStr =
          date.getFullYear() +
          '-' +
          (date.getMonth() + 1) +
          '-' +
          date.getDate();
        this.tableData.forEach((item) => {
          item['fileUrl'] = item.fileUrls[0]
        })
        table2Excel(this.columns, this.tableData, '企业得分-' + dateStr + '.xlsx')
        // FileSaver.saveAs(
        //   new Blob([wbout], {
        //     type: 'application/octet-stream',
        //   }),
        //   '企业得分-' + dateStr + '.xlsx'
        // );
      } catch (e) {
        console.log('e', e);
        // if (typeof console !== 'undefined') console.log(e, wbout);
      }
    },

    blurInput(e) {
      e.target.blur()
    },
    doubleClick(row, column) {
      // 避免点击过快导致多个输入框处于焦点状态
      row[column.property + 'Show'] = false;
      // 避免点击其他单元格导致表格刷新

      console.log('column.property', column.property);
      if (
        ![
          'score1',
          'score2',
          'score3',
          'score4',
          'score5',
          'score6',
          'score7',
          'score8',
          'score9',
          'score10',
          'score11',
          'score12',
        ].includes(column.property)
      )
        return;
      row[column.property + 'Show'] = true;
      this.key = Math.random();
      console.log('row', row);
      // this.updateTable(row);
    },
    //输入框失焦事件
    onBlur(row, column) {
      row[column.property + 'Show'] = false;
      this.updateTable(row);
    },
    clickView(row) {
      this.$router.push({ name: 'companyRiskDetail', params: { riskId: row.riskId } })
    },

    //更新表格
    updateTable(row) {
      this.saveData(row);
    },


    async handleDelete() {
      this.delVisible = false;
      const res = await delSafeRisk({
        ...this.currItem,
      });
      if (res.success) {
        this.clickQuery();
      } else {
      }
    },

    async clickQuery() {
      this.loading = true;
      const data = await querySafeRiskList({
        ...this.form,
        page_no: this.page_no,
        page_size: this.page_size,
      });
      if (data.success) {
        this.total_size = data.total;
        this.tableData = data.dataList;
      } else {
        this.total_size = 0;
        this.tableData = [];
      }
      this.loading = false;
    },


  },
  created() {
    // const date = new Date();
    // const currMonth = date.getFullYear() + '-' + (date.getMonth() + 1);
    // this.$set(this.form, 'scoreMonth', currMonth);
    // this.form.scoreMonth = currMonth;
    // console.log('this.form.currMonth', this.form.currMonth);
  },

  mounted() {
    console.log('ff:' + this.tableData);
    console.log('ff11:' + this.clickQuery);

    this.clickQuery(querySafeRiskList);
  },
};
</script>
<style scoped>
/deep/ .table_header th {
  background-color: #e3e3e3 !important;
  height: 40px;
}

::v-deep .el-table .el-table__cell {
  padding: 4px 0px;
}

::v-deep .el-table .warning-row {
  color: red;
}
</style>